<template>
<div class="content-wrapper pl-60 pr-60">
  <div class="fs-24 f-bold f-primary mt-20 mb-30">深度拥抱信创，打造信创数据库</div>
  <el-tabs class="page-tab" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="tab.title" :name="tab.name"  v-for="(tab,index) in tabList" :key="index">
      <component :is="tab.comp"></component>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
  import Page1Tab1 from './components/page1-tab1'
  import Page1Tab2 from './components/page1-tab2'
  import Page1Tab3 from './components/page1-tab3'
  import Page1Tab4 from './components/page1-tab4'
  import Page1Tab5 from './components/page1-tab5'
  import Page1Tab6 from './components/page1-tab6'
  import Page1Tab7 from './components/page1-tab7'
  import Page1Tab8 from './components/page1-tab8'
  import Page1Tab9 from './components/page1-tab9'
  export default {
    name: 'page1',
    components: {
      Page1Tab1,
      Page1Tab2,
      Page1Tab3,
      Page1Tab4,
      Page1Tab5,
      Page1Tab6,
      Page1Tab7,
      Page1Tab8,
      Page1Tab9
    },
    data () {
      return {
        activeName: '1',
        tabList: [
          { title: '基础信息', name: '1', comp: 'Page1Tab1' },
          { title: '功能性', name: '2', comp: 'Page1Tab2' },
          { title: '可靠性', name: '3', comp: 'Page1Tab3' },
          { title: '信息安全性', name: '4', comp: 'Page1Tab4' },
          { title: '易用性', name: '5', comp: 'Page1Tab5' },
          { title: '维护性', name: '6', comp: 'Page1Tab6' },
          { title: '可扩展性', name: '7', comp: 'Page1Tab7' },
          { title: '兼容性', name: '8', comp: 'Page1Tab8' },
          { title: '性能效率', name: '9', comp: 'Page1Tab9' }
        ]
      }
    },
    methods: {
      handleClick () {

      }
    }
  }
</script>

<style scoped lang="scss">
.content-wrapper{
  position: relative;
}
.page-tab{
  /deep/ .el-tabs__header{
    position: absolute;
    top:0px;
    right: 60px;

  }
  /deep/ .el-tabs__nav .el-tabs__item{
    color: rgba(255,255,255,.5)!important;
    font-size: 20px!important;
    &.is-active{
      color: $--color-primary!important;
    }
  }
}
</style>
